<template>
  <el-row type="flex">
    <div class="consultation-view-panel">
      <el-steps :active="consultation.status" process-status="wait" finish-status="success" simple>
        <el-step title="提交问题" ></el-step>
        <el-step title="等待回答" ></el-step>
        <el-step title="医生回答" ></el-step>
        <el-step title="问诊结束" ></el-step>
      </el-steps>
      <div class="consultation-question margin-top-20">
        <div class="time">
          <p class="main-color">提问于 {{consultation.created_at}}</p>
          <p>ww问题编号 {{consultation.id}}</p>
        </div>
        <div class="title">{{consultation.title}}</div>
        <div class="member-info margin-top-20 clearfix">
          <img class="float-left" :src="member.avatarImg ? member.avatarImg : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg'" alt="">
          <div class="float-left">
            <p class="name"><i>{{member.name}}</i>　{{member.sex ? '巴巴' : '麻麻'}}</p>
            <p class="tag">
              <template v-for="(value, key, index) in consultation.consultationType">
                <el-tag :key="index" size="mini" class="margin-right-10">{{value}}</el-tag>
              </template>
            </p>
          </div>
        </div>
        <div class="desc margin-top-10">
          {{consultation.description}}
        </div>
        <div class="item-row" v-if="consultation.diseaseFileList.length">
          <p class="label">相关图片</p>
          <div class="margin-top-10">
            <ul class="img-list clearfix">
              <li v-for="item in consultation.diseaseFileList" :key="item.id">
                <img
                  :src="item.url"
                  alt=""
                  @click="picturePreview(item.url)">
              </li>
            </ul>
          </div>
        </div>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
      <template v-if="consultation.status > 1">
        <div class="consultation-answer">
          <div class="display-flex clearfix">
            <span class="doctor-icon float-left">
              <img :src="doctor.avatarImg ? doctor.avatarImg : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg'" alt="">
              <p class="name">{{doctor.name}}</p>
            </span>
            <div class="answer-desc float-left">
               <div class="answer-desc" style="width:95%">
                <ul class="chatroom">
                  <li class="message" v-for="m in messages">
                    <b>{{m.from}}</b>: {{m.body}}
                      <br />
                      <span>{{m.time}}</span>
                  </li>
                 </ul>
                </div>
              </div>
          </div>
        </div>
        <div v-if="consultation.diseaseType != null" class="consultation-question margin-top-20">
          <div class="item-row">
            <el-tag v-for="(value, key, index) in consultation.diseaseType" :key="index" type="danger" size="small" class="margin-right-10">{{value}}</el-tag>
          </div>
        </div>
        <div v-if="consultation.status == 4" class="consultation-question margin-top-20">
          <div class="item-row">
            <p class="label">用户评价</p>
            <div class="margin-top-10">
              <el-rate
                v-model="consultation.score"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
            </div>
          </div>
          <div class="desc margin-top-10">
            {{consultation.comment}}
          </div>
        </div>
      </template>
    </div>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  props: ["consultation", "member", "doctor", "messages"],
  methods: {
    picturePreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    }
  }
};
</script>
